<template>
	<div
		class="drop-select"
		:class="{ 'drop-checkbox-agent': !isChangeLayout && isAgentCheck }"
	>
		<a-select
			v-if="isChangeLayout || isAgentCheck"
			v-model:value="dataRef"
			style="width: 220px"
			dropdownClassName="pok-drop-checkbox-content pok-drop-select-content"
			:dropdownMatchSelectWidth="false"
			@change="emit('onBlur', [dataRef])"
		>
			<template #suffixIcon>
				<i class="low-code iconpackup"></i>
			</template>
			<a-select-option
				v-for="item in checkOptions"
				:key="item?.value"
				:value="item?.value"
			>
				<div class="option-item">
					<div class="item-title">
						<ok-person-cell
							class="item-title-person"
							v-if="item.user"
							width="18px"
							height="18px"
							.person-info="item.user"
						></ok-person-cell>
						<EllipsisTooltip style="max-width: 84%" :title="item?.text" />
					</div>
					<div class="item-count">{{ item?.count }}</div>
				</div>
			</a-select-option>
		</a-select>
	</div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, onMounted, ref, nextTick, watch } from 'vue'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import { taskTypeEnum } from '@/constant/enums/processCenter'
const props = defineProps<{
	checkData?: string[]
	checkOptions?: Recordable<any>[]
	checkTotal?: Recordable<any>
	placeholder?: string
	taskType: keyof typeof taskTypeEnum
	isAgentCheck: boolean
	resetCheckVal: any
	isChangeLayout: boolean
}>()
const emit = defineEmits(['onBlur', 'getAgentCheckData', 'getTypeCheckData'])
const dataRef: any = ref('')

onMounted(() => {
	dataRef.value = props.checkData ? props.checkData[0] : ''
})
</script>
<style lang="less" scoped>
/deep/ .ant-select-selector {
	height: 30px !important;
	transform: translateY(2px);
	.ant-select-selection-item .option-item {
		display: flex;
		.item-title-person {
			margin-right: 4px;
		}
		.item-title {
			display: flex;
		}
		.item-count {
			margin-left: 4px;
			&::before {
				content: '(';
			}
			&::after {
				content: ')';
			}
		}
	}
}
.left-layout {
	height: 100%;
	display: flex;
	flex-direction: column;
	.filter-box {
		.filter-box-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16px;
			.filter-title {
				font-size: 14px;
				font-weight: 500;
				color: #1f2329;
			}
			.filter-btn {
				.ant-btn {
					font-weight: 500;
					font-size: 12px;
					color: rgba(0, 0, 0, 0.85);
				}
				.ant-btn-primary {
					color: #fff;
					margin-right: 8px;
				}
			}
		}
	}
	.filter-list {
		min-width: 280px;
		max-width: 350px;
	}
	.filter-list > label {
		display: flex;
		align-items: center;
		span:last-child {
			display: flex;
			justify-content: space-between;
		}
	}
	.line {
		height: 1px;
		width: 30px;
		color: #e8eaed;
	}
}
.ant-checkbox-group {
	width: 100%;
}
.ant-checkbox + span {
	width: 100%;
}
.ant-checkbox-group > label {
	display: flex;
	align-items: center;
}
.ant-checkbox-group > label span:last-child {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
	margin-left: 0;
}
.drop-checkbox-layout {
	display: flex;
	flex-direction: column;
}
.filter-list-layout {
	overflow-y: auto;
	height: 100%;
}
.filter-list-box {
	overflow-y: auto;
	height: 95%;
}
.filter-agent-layout {
	overflow-y: auto;
	height: 100%;
}
.check-item {
	width: 100%;
	display: flex;
	justify-content: space-between;
	.check-item-title {
		flex: 1;
		overflow: hidden;
		display: flex;
		align-items: center;
		.check-item-title-person {
			margin-right: 4px;
		}
	}
	.check-item-count {
		width: 35px;
		text-align: right;
	}
}
.left-agent-check {
	.ant-radio-group {
		width: 100%;
	}
	.ant-radio-wrapper {
		display: flex;
		align-items: center;
		height: 32px;
		margin: 0;
		> span:last-child {
			display: flex;
			width: 100%;
		}
	}
}
span.ant-radio + * {
	padding-right: 20px;
}
label.ant-radio-wrapper:hover {
	background: #f5f6f7;
}
.ant-checkbox-wrapper {
	height: 32px;
}
.ant-checkbox-wrapper:hover {
	background: #f5f6f7;
}
label.ant-radio-wrapper.ant-radio-wrapper-checked,
.ant-checkbox-wrapper.ant-checkbox-wrapper-checked {
	color: #4c78fc;
}
.checkbox-item {
	.check-text {
		max-width: 220px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.pok-drop-checkbox {
	.ant-select-selection-search {
		display: none;
		cursor: pointer;
	}
}
.ant-select-show-search.ant-select-multiple .ant-select-selector {
	cursor: pointer;
}
.iconduoxuan-bufenxuanze {
	color: @rok-primary-color;
}
.icon-a-duoxuanweixuanzhong {
	color: @rok-auxiliary-color;
}
.pok-drop-checkbox-content {
	position: relative;
}
.drop-checkbox-agent {
	position: absolute;
	top: 81px;
	left: 321px;
}
</style>
<style lang="less">
.pok-drop-select-content .rc-virtual-list {
	margin-bottom: 0 !important;
}
</style>
